<template>
  <div class="barChart">
    <span v-if="total.isShow" style="position:absolute;right: 50px;font-size:14px;color:rgb(155 155 155)">{{total.showString}}</span>
    <div id="barMain"></div>
    <div class="title-bottom">
      <span class="bottm-bj"></span>
      <span class="bottm-num">{{ titleBottom }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, watch, reactive,ref } from 'vue'
import { hdRentOrderQty, hdCallbackOrderQty, hdSaleOrderQty, rentOrderQty, callbackOrderQty, mxSaleOrderQty } from '@/api/workbenches/index'
import * as echarts from 'echarts'
// import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';
const emit = defineEmits(['changeBarData'])
const props = defineProps({
  // 展示数据类型
  dataType: {
    type: String,
    default: 'zx'
  },
  companyRole: {
    type: String,
    default: 'zx'
  },
  tagName: {
    type: String,
    default: 'zx-rent'
  },
 tabsType: {
    type: Number,
    default: 1
  },
  data: {
    type: Object,
    default: () => { }
  }
});
const total = reactive({
    isShow: false,
    num:{
      type:Number,
      default:0
    },
    showString:''
});
const titleBottom=ref('')
watch(() => props.dataType, (newVal, oldVal) => {
  if (newVal != oldVal) {
    setBarChart()
  }
});
watch(() => props.tagName, (newVal, oldVal) => {
  if (newVal != oldVal) {
    setBarChart()
  }
});
watch(() => props.tabsType, (newVal, oldVal) => {
  if (newVal != oldVal) {
    setBarChart()
  }
});
//更新图表数据
// const onHandleSizeChange = (val: number) => {
//   emit('pageChange', state.page);
// };
const setBarChart = () => {
  let optionBarChart = {}
  if (props.companyRole === 'zx') {
    if(props.tagName=='zx-rent'){
      if(props.tabsType==1){
        hdRentOrderQty().then(res => {
        optionBarChart = {
          title: {
            text: ''
          },
          tooltip: {},
          xAxis: {
            data: ['待确认', '待审核', '待申请发票', '待付款', '待开提箱单', '已提待还箱']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [res.data?.orderPlacedQty, res.data?.toBeConfirmedQty, res.data?.toBeReviewedQty,
              res.data?.toBeApplyInvoiceQty, res.data?.toBeInvoicedQty, res.data?.toBePaidQty],
              label: {
                show: true,
                position: 'top'
              },
              itemStyle: {
                  color: '#2158F3' // 红色
              }
            }
          ]
        }
        total.isShow = true
        total.num = res.data?.orderPlacedQty + res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty + res.data?.toBeApplyInvoiceQty+ res.data?.toBeInvoicedQty + res.data?.toBePaidQty
        total.showString = '租箱订单量总计：' + total.num + '单'
        titleBottom.value="租箱订单量"
        // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
        initChart(optionBarChart);
      })
      }else if(props.tabsType==2){
         hdCallbackOrderQty().then(res => {
          optionBarChart = {
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['待确认', '待审核']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [res.data?.toBeConfirmedQty, res.data?.toBeReviewedQty],
                label: {
                  show: true,
                  position: 'top'
                },
                itemStyle: {
                    color: '#2158F3' // 红色
                }
              }
            ]
          }
          total.isShow = true
          total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty
          total.showString = '租箱订单量总计：' + total.num + '单'
          titleBottom.value="租箱订单量"

          // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
          initChart(optionBarChart);
        })
      }
      
    }else if(props.tagName=='zx-buyBox'){
      if(props.tabsType==1){
        hdSaleOrderQty().then(res => {
          optionBarChart = {
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['待确认', '待审核', '待申请发票', '待付款', '待开提箱单']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [res.data?.toBeConfirmedQty, res.data?.toBeReviewedQty, res.data?.toBeApplyInvoiceQty, res.data?.toBePaidQty, res.data?.orderPlacedQty],
                label: {
                  show: true,
                  position: 'top'
                },
                itemStyle: {
                    color: '#2158F3' // 红色
                }
              }
            ]
          }
          total.isShow = true
          total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty + res.data?.toBeApplyInvoiceQty + res.data?.toBePaidQty + res.data?.orderPlacedQty
          total.showString = '购箱订单量总计：' + total.num + '单'
          titleBottom.value="购箱订单量"
          // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
          initChart(optionBarChart);
        })
      }else if(props.tabsType==2){
        mxSaleOrderQty().then(res => {
        optionBarChart = {
          title: {
            text: ''
          },
          tooltip: {},
          xAxis: {
            data: ['待确认', '待审核', '待开发票', '待收售箱款', '待开提箱单']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [res.data?.toBeConfirmedQty, res.data?.toBeReviewedQty, res.data?.toBeApplyInvoiceQty, res.data?.toBePaidQty, res.data?.orderPlacedQty],
              label: {
                show: true,
                position: 'top'
              },
              itemStyle: {
                  color: '#2158F3' // 红色
              }
            }
          ]
        }
        total.isShow = true
        total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty + res.data?.toBeApplyInvoiceQty + res.data?.toBePaidQty + res.data?.orderPlacedQty
        total.showString = '售箱订单量总计：' + total.num + '单'
        titleBottom.value="售箱订单量"
        // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
        initChart(optionBarChart);
      })
      }
    }    
  } else if (props.companyRole === 'putBox') {
    if(props.tagName=='putBox-rent'){
      if(props.tabsType==1){
        rentOrderQty().then(res => {
          optionBarChart = {
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['待确认', '待审核', '待开发票', '待收款', '待开提箱单', '待还箱']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [res.data.toBeConfirmedQty, res.data.toBeReviewedQty, res.data.toBeApplyInvoiceQty,
                res.data.toBePaidQty, res.data.orderPlacedQty, res.data.waitReturnQty],
                label: {
                  show: true,
                  position: 'top'
                },
                itemStyle: {
                    color: '#2158F3' // 红色
                }
              }
            ]
          }
          total.isShow = true
          total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty + res.data?.toBeApplyInvoiceQty + res.data?.toBePaidQty + res.data?.orderPlacedQty + res.data?.waitReturnQty
          total.showString = '出租箱订单量总计：' + total.num
          titleBottom.value="出租箱订单量"
          // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
          initChart(optionBarChart);
        })
      }else if(props.tabsType==2){
        callbackOrderQty().then(res => {
          optionBarChart = {
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['待确认', '待审核']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [res.data.toBeConfirmedQty, res.data.toBeReviewedQty],
                label: {
                  show: true,
                  position: 'top'
                },
                itemStyle: {
                    color: '#2158F3' // 红色
                }
              }
            ]
          }
          total.isShow = true
          total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty
          total.showString = '出租箱订单量总计：' + total.num 
          titleBottom.value="出租箱订单量"
          // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
          initChart(optionBarChart);
        })
      }
      
    }else if(props.tagName=='putBox-buyBox'){
        if(props.tabsType==1){
        hdSaleOrderQty().then(res => {
          optionBarChart = {
            title: {
              text: ''
            },
            tooltip: {},
            xAxis: {
              data: ['待确认', '待审核', '待申请发票', '待付款', '待开提箱单']
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: [res.data?.toBeConfirmedQty, res.data?.toBeReviewedQty, res.data?.toBeApplyInvoiceQty, res.data?.toBePaidQty, res.data?.orderPlacedQty],
                label: {
                  show: true,
                  position: 'top'
                },
                itemStyle: {
                    color: '#2158F3' // 红色
                }
              }
            ]
          }
          total.isShow = true
          total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty + res.data?.toBeApplyInvoiceQty + res.data?.toBePaidQty + res.data?.orderPlacedQty
          total.showString = '购箱订单量总计：' + total.num + '单'
          titleBottom.value="购箱订单量"
          // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
          initChart(optionBarChart);
        })
      }else if(props.tabsType==2){
        mxSaleOrderQty().then(res => {
        optionBarChart = {
          title: {
            text: ''
          },
          tooltip: {},
          xAxis: {
            data: ['待确认', '待审核', '待开发票', '待收售箱款', '待开提箱单']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [res.data?.toBeConfirmedQty, res.data?.toBeReviewedQty, res.data?.toBeApplyInvoiceQty, res.data?.toBePaidQty, res.data?.orderPlacedQty],
              label: {
                show: true,
                position: 'top'
              },
              itemStyle: {
                  color: '#2158F3' // 红色
              }
            }
          ]
        }
        total.isShow = true
        total.num = res.data?.toBeConfirmedQty + res.data?.toBeReviewedQty + res.data?.toBeApplyInvoiceQty + res.data?.toBePaidQty + res.data?.orderPlacedQty
        total.showString = '售箱订单量总计：' + total.num + '单'
        titleBottom.value="售箱订单量"
        // echarts.init(document.getElementById('barMain')).setOption(optionBarChart);
        initChart(optionBarChart);
      })
      }
    }
    
  }
}

const initChart = (option) => {
  const barMain = document.getElementById('barMain');
  if (barMain) {
    const chartInstance = echarts.init(barMain);
    chartInstance.setOption(option);
  } else {
    console.error('Element with id "barMain" not found');
  }
}
onMounted(() => {
  setBarChart()
})

</script>
<style lang="scss" scoped>
#barMain {
  margin-left: 10%;
  width: 80%;
  height: 500px;
}
.barChart{
  width: 100%;
}
.title-bottom{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-bottom .bottm-num{
  padding-left: 5px;
  line-height: 20px;
}
.title-bottom .bottm-bj{
  width: 16px;
  height: 4px;
  background:#2158F3 ;
  border-radius: 5px;
}
</style>